<template>
	<view class="offline">
		<view class="h1">订单及收入</view>
		<u--text type="info" size="12px" align="center" text="除当日数据,其他数据每三小时更新数据周期7:00-7:00"></u--text>
		<view class="list-box">
			<view class="item" v-for="(item, i) in list" :key="i">
				<view class="title">{{ item.name }}</view>
				<view class="num">{{ item.num || 0 }}</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import http from "@/request/index.js"
	const list = ref([
		{ name: '今日成单', num: 0 },
		{ name: '本周成单', num: 0 },
		{ name: '本月成单', num: 0 },
		{ name: '今日收入', num: 0 },
		{ name: '本周收入', num: 0 },
		{ name: '本月收入', num: 0 },
		{ name: '总成单', num: 0 },
		{ name: '年度收入', num: 0 },
		{ name: '总收入', num: 0 }
	])
	onMounted(() => {
		getData()
	})
	const getData = async() => {
		let { code, msg, data } = await http('/app/settleAccounts/getDriveCounts', {}, 'POST')
		if (code != 200) return
		let { dayOrder, dayMoney, weekOrder, weekMoney, monthOrder, monthMoney, yearOrder, yearMoney, sumOrder, sumMoney } = data
		list.value[0].num = dayOrder
		list.value[1].num = weekOrder
		list.value[2].num = monthOrder
		list.value[3].num = dayMoney
		list.value[4].num = weekMoney
		list.value[5].num = monthMoney
		list.value[6].num = sumOrder
		list.value[7].num = yearMoney
		list.value[8].num = sumMoney
	}
</script>

<style lang="scss" scoped>
	.offline {
		.h1 {
			text-align: center;
			font-size: 16px;
			font-weight: bold;
			line-height: 40px;
			margin-top: 20px;
		}
		.list-box {
			width: 95%;
			margin: 10px auto;
			border-radius: 10px;
			overflow: hidden;
			box-shadow: 0px 0px 5px 5px rgba(232,233,235,0.5);
			.item {
				display: inline-block;
				width: calc(33.3% - 1px);
				border-right: 1px solid #E8E9EB;
				text-align: center;
				font-size: 12px;
				&:nth-of-type(3n) {
					border-right: none;
				}
				.title {
					height: 30px;
					line-height: 30px;
					background-color: #E8E9EB;
				}
				.num {
					height: 50px;
					line-height: 50px;
					font-weight: bold;
					overflow: hidden;
				}
			}
		}
	}
</style>
